<template>
  <div class="page-container">
    <detail-content :handleType="'checkType'" v-if="routeQuery.type == 'checkType'" :costInfo="costInfo" />
    <template v-else>
      <a-tabs v-model:active-key="activeType">
        <a-tab-pane key="1" title="支出单详情">
          <detail-content :activeType="activeType" :costInfo="costInfo" />
        </a-tab-pane>
        <a-tab-pane key="2" title="操作记录">
          <OperateLog :id="routeParams.id" type="31" />
        </a-tab-pane>
      </a-tabs>
    </template>
  </div>
</template>

<script setup name="OperateCostDetail">
  import { onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import detailContent from './detail-content.vue'
  import { getCostDetailApi } from '@/api/business/operateCost'

  const route = useRoute()
  const routeQuery = route.query
  const routeParams = route.params
  const activeType = ref('1')

  const costInfo = ref({})
  const getDetail = (id) => {
    getCostDetailApi({ id: id }).then((res) => {
      costInfo.value = res.result
    })
  }

  onMounted(() => {
    const id = routeParams.id
    if (id) {
      getDetail(id)
    }
  })
</script>

<style lang="less" scoped>
  .container {
    display: flex;
  }
</style>
